<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"//>	
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style type="text/css">
			.mui-pull-left{
		    		color: #FFFFFF;	
		    		line-height:44px ;
		    	}
		    	.mui-pull-right{
		    		color: #FFFFFF;	
		    		line-height:44px ;
		    		
		    	}
		    	.mui-title{
		    		color: #FFFFFF;
		    	}
		    	.mui-icon.iconfont{
		    		font-size: 18px;
		    	}
		    	nav .mui-icon{
		    		left:50%;
		    		margin-left: -12px;
		    	}
		    	.mui-bar.mui-bar-nav{
		    		background: #0072dc;
		    	}
		    	
		    	.mui-control-item.text_submain{
		    		line-height: 32px;
		    	}
		    	.qcontent img{
		    		width: auto !important;
		    		height: auto !important;
		    		max-width: 100%;
		    	}
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left">
				<i class="mui-icon iconfont">&#xe62f;</i>
				<span class="text_submain" style="vertical-align: 2px;">返回</span>
			</a>
			<h1 class="mui-title" id="title">{{circleName}}</h1>
			<a @tap='addAnswer' class="mui-pull-right">
				<i class="mui-icon iconfont">&#xe61d;</i>
			</a>
		</header>
		<div class="mui-content">
			<div class="mui-table-view-cell bg_white" url=''>
				<div class="card-topic_header">
					<i class="mui-pull-left mui-icon iconfont i_label_little" style="color: #666666;line-height: 25px;margin-right: 5px;">&#xe61c;</i>
					<p><span class="text_main card_username">{{qInfo.UserName}}</span>
						<span class="date fr">{{qInfo.Date}}</span>
					</p 
				</div>
				<div class="card-topic_content" style="margin-top:2px;">
					<div class="card-topic-title">
						<p class="topic_title text_main">{{qInfo.Title}}
						</p>
					</div>
					<div class="topic_content">
						<p class="card_content_attr text_submain qcontent">
							<span>{{{qInfo.Content}}}</span>
						</p>
					</div>
					<div class="card_note">
						<p class="text_note card_note-fl">
							<span class="">{{qInfo.collectionCount}}人收藏</span>
							<span class="">{{qInfo.answerCount}}人评论</span>
						</p>
						<p class="text_note card_note-fr">
							<div @tap='collect' class="btn-collect" style="margin-right: 0px;">{{qInfo.collectStatus==0?'收藏':'取消收藏'}}</div>
						</p>
						<div class="cl"></div>
					</div>
				</div>
			</div>		
		</div>
			    <div id="srollWrapper" class="mui-scroll-wrapper">
			    	<div id="scroll" class="mui-scroll">
			    		<ul id="container" class="mui-table-view app-hide">
			    			<li @tap='goAnswer(answer.ID)' v-for='answer in answers' class="mui-table-view-cell">
			    				<div class="card-topic_header">
									<p>
										<i class="mui-pull-left mui-icon iconfont i_label_little" style="color: #666666;line-height: 25px;margin-right: 5px;">&#xe61c;</i>
										<span class="text_main card_username">{{answer.UserName}}</span>
										<span class="text_main">{{answer.Date}}</span>						
									</p>
								</div>
								<div class="card-topic_content" style="margin-top:2px;border-bottom: #E7E7E7;">
									<div class="comment_content">
										<p class="comment_content_attr text_submain">
											<span>{{{answer.Content}}}</span>
										</p>
									</div>
								</div>			
			    			</li>
			    		</ul>
			    	</div>
			    </div>
		
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
			mui.init();
			var vm=new Vue({
				el:'#app',
				data: {
					circleName:'',
					qid : '',
					qInfo:{},
					answers:[],
					scrollAnswer:{},
					paramObj:{
						PageSize:6,
						CurPage:1,
					}
				},
				ready:function () {
					var me = this;
					$('#app .app-hide').show();
					me.scrollAnswer=ui.setPullToRefresh(this.getAnswer);
					mui.plusReady(function () {
						var current = plus.webview.currentWebview();
						me.qid = current.qid;
						me.circleName = current.circleName;
						me.getQInfo();
						me.getAnswer(true);
					})
					document.addEventListener('reloadAnswers',function () {
						me.getAnswer(true);
					})
				},
				methods:{
					addAnswer: function(){
						openPage('addAnswer.html','addAnswer',{qid: this.qid});
					},
					goAnswer: function(aid){
						var current = plus.webview.currentWebview();
						openPage('answer.html','answer',{aid:aid});
					},
					collect :function(e){
//						console.log("in collect");
//						console.log(JSON.stringify(e));
						e.stopPropagation();
						e.preventDefault();
						var me = this;
						if(me.qInfo.collectStatus==0){
							ajax.post(api.topic.collectTopic,{ID: me.qid},function () {
								me.qInfo.collectStatus=1;
								me.qInfo.collectionCount++;
							},true)
						}else if(me.qInfo.collectStatus==1){
							ajax.post(api.topic.unCollectTopic,{ID: me.qid},function () {
								me.qInfo.collectStatus=0;
								me.qInfo.collectionCount--;
							},true);
						}else{
							mui.toast('收藏状态不正确');
						}
					},
					getQInfo: function(){
						var me = this;
						if(!me.qid){
							alert('qid 为空，无法获取话题信息！');
							return;
						}
						ajax.post(api.topic.getTopicInfo, {
							ID : me.qid
						}, function(data) {
							me.qInfo = data.Data;
							console.log(JSON.stringify(data.Data));
							me.$nextTick(function () {
								setTimeout(function () {
									ui.fixScroll();
								},500)
							});
						}, false, function () {
							var current = plus.webview.currentWebview();
							showPage(current);
						});
					},
					getAnswer: function (isRefresh) {
						var me = this;
						var nomore = false;
						me.paramObj.CurPage = isRefresh?1:me.paramObj.CurPage+1;
						ajax.post(api.topic.getAnswerList,{
							ID: me.qid,
							PageSize: me.paramObj.PageSize,
							CurPage: me.paramObj.CurPage,
						},function (data) {
							data = data.Data;
							me.answers=isRefresh?data:me.answers.concat(data);
							nomore=data.length<me.paramObj.PageSize;
						},false,function(){
							ui.clearScrollAnimal(me.scrollAnswer.puller, isRefresh, nomore);
						});
					}
				}
			})
		</script>	
	</body>
</html>